{extend name="main"}
{block name="style"}
<style type="text/css">
	.el-collapse{border:0;}
	.el-collapse-item__header{border:0;}
	.el-collapse-item__wrap{border:0;}
	.bg{background-color: #F8F8F8}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="pb-3 border-bottom mb-3">
        <el-button
            type="warning"
            size="mini"
            @click="window.open('/setting/add?type={$ctype}')">
            添加配置
        </el-button>
	</div>
	<el-form  label-width="200px" :label-position="labelPosition"
	  @submit.native.prevent="return;"
	  v-loading="loading">

	  <el-form-item v-for="(v,index) in list" :label="v.title" class="hover-bg">
	  	<div class="row mx-0 flex-center">
		    <el-input class="col-12 pl-0 pr-0" :class="getInputCol(v.value)"
		    v-model="v.value"
		    v-if="v.type==='input'"
		    @keyup.enter.native="editConfig(v)"></el-input>
	      	<el-input type="textarea" :autosize="{ minRows: 3}"  class="col-12 col-sm-5 pl-0 pr-0"
	      		v-model="v.value" 
	      		v-if="v.type === 'textarea'" 
	      		@change="editConfig(v);"></el-input>
		    <div v-if="v.type==='upload'">
			  <el-image
			  	v-if="v.url" 
			  	class="mw-200px mh-200px"
			    :src="v.url" 
			    :preview-src-list="[v.url]">
			  </el-image>
		  	  <el-upload
				  class="avatar-uploader"
				  action="/uploadFiles"
				  name="file"
				  accept="image/*"
				  :data="{path:'web/img',index:index,id:v.id}"
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess"
				  :on-error="handleAvatarError"
				  :before-upload="beforeAvatarUpload">
		  			<el-button size="small" type="primary">选择文件</el-button>
			  </el-upload>
		    </div>
		    <el-switch
			  v-model="v.value"
			  active-color="#13ce66"
			  inactive-color="#6c757d"
		      :active-value="1"
		      :inactive-value="0"
		      v-if="v.type==='switch'"
			  @change="editConfig(v);">
			</el-switch>
		    <el-radio-group 
			    v-model="v.value" 
			    v-if="v.type === 'radio'" 
			    @change="editConfig(v);">
		      	<el-radio v-for="va in v.options" :label="va.value">{{va.title}}</el-radio>
		    </el-radio-group>
		    <el-checkbox-group 
			    v-model="v.value" 
			    v-if="v.type === 'checkbox'"
			    @change="editConfig(v);">
		      	<el-checkbox v-for="va in v.options" :label="va.value">{va.title}}</el-checkbox>
		    </el-checkbox-group>
		    <el-select 
		    	v-model="v.value" 
		    	v-if="v.type === 'select'"
		    	@change="editConfig(v);">
		      <el-option
		        v-for="item in v.options"
		        :key="item.value"
		        :label="item.title"
		        :value="item.value">
		      </el-option>
		    </el-select>
		  	<el-color-picker 
		  		v-model="v.value" show-alpha 
		  		v-if="v.type === 'color'"
			    @change="editConfig(v);">
		  	</el-color-picker>
			<el-date-picker
				v-if="v.type === 'date'"
				v-model="v.value"
				type="date"
				placeholder="选择日期"
		    	@change="editConfig(v);">
			</el-date-picker>
			<el-time-picker
				v-if="v.type === 'time'"
				v-model="v.value"
				arrow-control
				:picker-options="{
				selectableRange: '00:00:00 - 23:59:59'
				}"
				value-format="H:m:s"
				placeholder="选择时间"
		    	@change="editConfig(v);">
			</el-time-picker>
			<el-date-picker
				v-if="v.type === 'datetime'"
				v-model="v.value"
				type="datetime"
				placeholder="选择日期时间"
		    	@change="editConfig(v);">
			</el-date-picker>
			<div class="col-12 col-sm-6 text-muted small" v-if="v.tips">
				<el-popover
				    placement="top-start"
				    width="300"
				    trigger="click"
				    :content="v.ctype+'.'+v.key">
				    <span slot="reference">{{v.tips}}</span>
				</el-popover>
			</div>
		</div>
	  </el-form-item>
	</el-form>
	<div class="p-3 mt-3 bg" v-for="(v,index) in ProductList" v-if="v.data&&v.data.length">
		<div class="p-2 border-bottom">{{v.title}}</div>
		<div class="row pl-4">
			<div class="col-6 col-lg-4 text-secondary p-2" v-for="(va,i) in v.data">{{v.title}}-{{va.title}}({{va.price}}元)：<span class="text-primary">{{list[0].value}}.{{v.value}}.{{va.id}}</span></div>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="Data"}
	var list=[];
	{else/}
	var list={:json_encode($Data,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			loading:false,
			search:{
				ajax:false,
			},
			list:list,
			ProductList:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
			this.getApplePayProductList();
		},
		methods:{
			getInputCol(val){
				var cla='';
				switch(true){
					case val.length>200:
						cla='col-sm-12';
						break;
					case val.length>180:
						cla='col-sm-11';
						break;
					case val.length>160:
						cla='col-sm-10';
						break;
					case val.length>140:
						cla='col-sm-9';
						break;
					case val.length>120:
						cla='col-sm-8';
						break;
					case val.length>100:
						cla='col-sm-7';
						break;
					case val.length>80:
						cla='col-sm-6';
						break;
					case val.length>60:
						cla='col-sm-5';
						break;
					case val.length>40:
						cla='col-sm-4';
						break;
					case val.length>20:
						cla='col-sm-3';
						break;
					default:
						cla='col-sm-2';
						break;
				}
				return cla;
			},
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'web/img'){
							if (this.list[res.data.index] && this.list[res.data.index].id == res.data.id) {
								this.list[res.data.index].value=res.data.path;
								this.list[res.data.index].url=res.data.url;
								this.editConfig(this.list[res.data.index]);
							}
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
	      	beforeAvatarUpload:function(file) {
				const isJPGPNG = XYBase.config.imageMime.indexOf(file.type)>=0;
				const isLt10M = file.size/1024 <= 10240;

				if (!isJPGPNG) {
				  XYBase.error('缩略图只能是PNG格式');
				  return false;
				}
				if (!isLt10M) {
				  XYBase.error('缩略图大小不能超过 10M!');
				  return false;
				}
				return isJPGPNG && isLt10M;
	      	},
			editConfig(val){
				var _this=this;
				_this.loading=true;
				$.ajax({
					url:'/setting/edit',
					data:val,
					type:'post',
					dataType:'json',
					success:function(ret){
						_this.loading=false;
						if (ret) {
							if(ret.code == 0){
								XYBase.success(ret.msg);
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
				          	XYBase.error(XYBase.config.system_network_error);
						}
					},
					error:function(err){
						_this.loading=false;
				        XYBase.error(XYBase.config.system_network_error);
					}
				});
			},
	      	getApplePayProductList() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'/getApplePayProductList',
					type:'get',
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.ProductList=ret.data;
							}
						}
					}
				});
			}
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}